<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="addSongDiv">
    <form id="form">
        <h1 id="addSongMsg">上传音乐</h1>
        <span id="addSong_msg"  style="display : none"> </span>
        <p>歌名: <input id="name" type="text" required></p>
        <p>上传音乐文件:  <input type="file" id="songFile"><br></p>
        <div id="subDiv">
            <input type="button" class="button" value="上传" id="addSongButton">
            <input type="reset" class="button" value="清除">
        </div>
    </form>
</div>
</body>
</html>
<script src="js/axios-0.18.0.js"></script>
<script>
    //点击按钮完成提交数据
    const loginButton = document.getElementById('addSongButton');
    loginButton.addEventListener('click', function() {
        //获取数据
        const name = document.querySelector( 'input[id="name" ]').value;
        const fileInput = document.querySelector('input[id="songFile"]');
        // 使用FormData处理表单数据
        const formData = new FormData();
        formData.append("name", name);
        formData.append("file", fileInput.files[0]);
        // 发送 POST 请求
        axios.post("/MVCDemo/song/addSong", formData).then(function(resp) {
            const result=resp.data;
                // 显示信息
                document.getElementById("addSong_msg").style.display = 'block ';
                document.getElementById("addSong_msg").textContent=result.message;
        }).catch(function(error) {
            console.error("请求出错:", error);
        });
    })
</script>
